import { Point } from '../../../../../Hooks/usePoint'

const style = new ol.style.Style({})
export let video_source = new ol.source.Vector({ wrapX: false })

let client
export function clickShowVideo(map) {
  let canvas = drawCanvas(map)
  const style = new ol.style.Style({
    image: new ol.style.Icon({
      img: canvas,
      imgSize: [canvas.width, canvas.height]
    })
  })
  let video_layer = new ol.layer.Vector({
    source: video_source,
    style
  })
  map.addLayer(video_layer)
  map.on('click', handleMap)

  function handleMap(evt) {
    let position = evt.coordinate
    client = map.getPixelFromCoordinate(position)
    Point.query({
      position,
      service: {
        name: 'guanggu',
        layerId: 3
      },
      callback: onSuccess
    })
  }

  function onSuccess(res) {
    if (res) {
      video_source.clear()
      video_source.addFeatures(res)
      let popupVideo = document.querySelector('#popup-video')
      popupVideo.style.display = 'block'
      popupVideo.style.left = client[0] - 100 + 'px'
      popupVideo.style.top = client[1] - 200 + 'px'
    }
  }

  return handleMap
}
